﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>英仕宝可视化云监理</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <script
      type="text/javascript"
      src="js/ezuikit.js?v=1"
    ></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css" />
  </head>
  <script type="text/javascript">
    $(document).ready(function () {
      var html = $(".house_list ul").html();
      $(".house_list ul").append(html);
      var ls = $(".house_list li").length / 2 + 1;
      i = 0;
      ref = setInterval(function () {
        i++;
        if (i == ls) {
          i = 1;
          $(".house_list ul").css({ marginTop: 0 });
          $(".house_list ul").animate({ marginTop: -".52" * i + "rem" }, 1000);
        }
        $(".house_list ul").animate({ marginTop: -".52" * i + "rem" }, 1000);
      }, 2400);

      var html2 = $(".adduser ul").html();
      $(".adduser ul").append(html2);
      var ls2 = $(".adduser li").length / 2 + 1;
      a = 0;
      ref = setInterval(function () {
        a++;
        if (a == ls2) {
          a = 1;
          $(".adduser ul").css({ marginTop: 0 });
          $(".adduser ul").animate({ marginTop: -".5" * a + "rem" }, 800);
        }
        $(".adduser ul").animate({ marginTop: -".5" * a + "rem" }, 800);
      }, 4300);
    });
  </script>
  <body>
    <div class="loading">
      <div class="loadbox"><img src="picture/loading.gif" /> 页面加载中...</div>
    </div>
    <div class="head">
      <h1><img src="picture/logo.png" />AI可视化云监理平台</h1>
      <div class="weather">
        <!-- <img src="picture/weather.png" /><span>多云转小雨</span> -->
        <span id="showTime"></span>
      </div>
      <script>
        var t = null;
        t = setTimeout(time, 1000); //开始运行
        function time() {
          clearTimeout(t); //清除定时器
          dt = new Date();
          var y = dt.getFullYear();
          var mt = dt.getMonth() + 1;
          var day = dt.getDate();
          var h = dt.getHours(); //获取时
          var m = dt.getMinutes(); //获取分
          var s = dt.getSeconds(); //获取秒
          document.getElementById("showTime").innerHTML =
            y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
          t = setTimeout(time, 1000); //设定定时器，循环运行
        }
      </script>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li class="bigShow">
          <div
            class="boxall smallSggy"
            style="height: calc(66.66666% - 0.25rem)"
          >
            <div class="alltitle">施工工艺</div>
            <div class="boxnav nav01">
              <div class="listhead listhead2">
                <span style="width: 20%">序 号</span>
                <span style="width: 80%">装修流程</span>
              </div>
              <div class="listnav listnav2 scrollDiv1">
                <!-- <ul id="ProcessList">
                </ul> -->
                <ul style="width: 100%" class="craft"></ul>
              </div>
            </div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall smallYslc" style="height: 2.4rem">
            <div class="alltitle">验收流程</div>
            <div
              class="boxnav nav03"
              style="height: calc(100% - 0.4rem); padding: 0"
            >
              <div class="scroll-text" style="height: 100%">
                <div id="echart1" style="height: 100%; width: 100%"></div>
              </div>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li style="padding-left: 0px; padding-right: 0px">
          <div class="bar">
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter" id="developer"></li>
                <li class="pulll_right counter" id="device"></li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left">合作开发商</li>
                <li class="pulll_right">运行设备数</li>
              </ul>
            </div>
          </div>
          <div class="map" style="padding-top: 0.2rem">
            <div class="playWind1">
              <div class="player1" id="playWind"></div>
            </div>
            <div class="playercontainer">
              <div class="player" id="playWind2"></div>
              <div class="player" id="playWind3"></div>
              <div class="player" id="playWind4"></div>
            </div>
          </div>
        </li>
        <!-- 小于870展示的左侧 -->
        <li class="smallShow fullScreenHide">
          <div
            class="boxall smallSggy"
            style="height: calc(66.66666% - 0.25rem)"
          >
            <div class="alltitle">施工工艺</div>
            <div class="boxnav nav01">
              <div class="listhead listhead2">
                <span style="width: 20%">序 号</span>
                <span style="width: 80%">装修流程</span>
              </div>
              <div class="listnav listnav2 scrollDiv1">
                <ul style="width: 100%" class="craft"></ul>
              </div>
            </div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall smallYslc" style="height: 3.2rem">
            <div class="alltitle">验收流程</div>
            <div
              class="boxnav nav03"
              style="height: calc(100% - 0.6rem); padding: 10px"
            >
              <div class="scroll-text" style="height: 100%">
                <div
                  id="echart1s"
                  style="height: 100%; width: 100%; min-height: 2.4rem"
                ></div>
              </div>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li class="fullScreenHide">
          <div class="boxall smallTdry">
            <div class="alltitle">团队人员</div>
            <div class="tabs" id="team_first"></div>

            <div class="tit02"><span>优秀成员</span></div>
            <div class="adduser adduserPeople">
              <ul id="team"></ul>
            </div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall smallYjl" style="height: 3.2rem">
            <div class="alltitle">AI云监理</div>
            <div class="house_list">
              <ul id="supervisor"></ul>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="back"></div>
    <script language="JavaScript" src="js/js.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/area_echarts.js"></script>
    <script type="text/javascript">
      function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == variable) {
            return pair[1];
          }
        }
        return false;
      }

      var token;
      var width = "800";

      var screenWidth =
        window.innerWidth || document.documentElement.clientWidth;
      if (screenWidth <= 870) {
        width = screenWidth;
      }

      var channel_id = getQueryVariable("channel_id") || 1; // 获取 channel_id,默认值为1
      var template = "pcLive";

      // 初始化播放器函数
      const initPlayer = (id, width, height, url, token) => {
        if (url) {
          return new EZUIKit.EZUIKitPlayer({
            id: id,
            width: width,
            height: height,
            template: "pcLive",
            url: url,
            accessToken: token,
            autoplay: true,
            plugin: ["talk", "ptz"]
          });
        } else {
          // 创建一个div容器，使用和播放器完全一样的样式
          $(`#${id}`).css({
            width: width + 'px',
            height: height + 'px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: '#000',
            margin: '0',
            padding: '0',
            position: 'relative'
          });

          // 设置占位图
          $(`#${id}`).html(`
            <img src="images/placeholder.jpg" 
                 style="
                   position: absolute;
                   top: 0;
                   left: 0;
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   margin: 0;
                   padding: 0;
                 " 
                 alt="No Camera Available">
          `);
          return null;
        }
      };

      // 初始化所有播放器
      let mainPlayer;
      let smallPlayers = [];

      const initializePlayers = (cameras) => {
        // 计算主播放器宽度
        const mainWidth = width;
        const mainHeight = (mainWidth * 9) / 16;

        // 计算小播放器宽度 - 根据屏幕宽度判断
        let smallWidth;
        if (screenWidth <= 870) {
          // 小尺寸时，考虑边距和间隔，防止出现滚动条
          smallWidth = Math.floor((screenWidth - 40) / 3);  // 40px是总边距和间隔
        } else {
          smallWidth = Math.floor(mainWidth / 3);  // PC端保持原来的计算方式
        }
        const smallHeight = Math.floor((smallWidth * 9) / 16);

        if (cameras[0]) {
          mainPlayer = initPlayer(
            "playWind",
            mainWidth,
            mainHeight,
            `ezopen://open.ys7.com/${cameras[0].serial_number}/1.hd.live`,
            cameras[0].access_token
          );
        } else {
          initPlayer("playWind", mainWidth, mainHeight, null, null);
        }

        for (let i = 1; i <= 3; i++) {
          const camera = cameras[i];
          const playerId = `playWind${i + 1}`;

          if (camera) {
            smallPlayers[i - 1] = initPlayer(
              playerId,
              smallWidth,
              smallHeight,
              `ezopen://open.ys7.com/${camera.serial_number}/1.hd.live`,
              camera.access_token
            );
          } else {
            initPlayer(playerId, smallWidth, smallHeight, null, null);
          }

          if (camera) {
            bindClickEvent(i, cameras);
          }
        }
      };

      // 绑定点击事件
      const bindClickEvent = (index, cameras) => {
        $(`#playWind${index + 1}`).off('click').on('click', function() {
          switchCameras(index, cameras);
        });
      };

      // 切换摄像头
      const switchCameras = (index, cameras) => {
        if (mainPlayer && smallPlayers[index - 1]) {
          try {
            // 停止并销毁当前播放器
            mainPlayer.stop();
            smallPlayers[index - 1].stop();
            mainPlayer.destroy();
            smallPlayers[index - 1].destroy();

            // 交换摄像头
            const mainCameraIndex = 0;
            const smallCameraIndex = index;

            // 使用相同的宽度计算方式
            let smallWidth;
            if (screenWidth <= 870) {
              smallWidth = Math.floor((screenWidth - 40) / 3);
            } else {
              smallWidth = Math.floor(width / 3);
            }
            const smallHeight = Math.floor((smallWidth * 9) / 16);

            // 重新初始化播放器
            mainPlayer = initPlayer(
              "playWind",
              width,
              (width * 9) / 16,
              `ezopen://open.ys7.com/${cameras[smallCameraIndex].serial_number}/1.hd.live`,
              cameras[smallCameraIndex].access_token
            );

            smallPlayers[index - 1] = initPlayer(
              `playWind${index + 1}`,
              smallWidth,
              smallHeight,
              `ezopen://open.ys7.com/${cameras[mainCameraIndex].serial_number}/1.hd.live`,
              cameras[mainCameraIndex].access_token
            );

            // 更新cameras数组
            const temp = cameras[mainCameraIndex];
            cameras[mainCameraIndex] = cameras[smallCameraIndex];
            cameras[smallCameraIndex] = temp;

            // 重新绑定点击事件
            bindClickEvent(index, cameras);

          } catch (e) {
            console.error("切换视频失败:", e);
          }
        }
      };

      $.ajax({
        url:"https://szdp-test.syqywl.com/interface/api/index?channel_id=" +channel_id,
        // url: "http://127.0.0.1:9529/api/index?channel_id=" + channel_id, //请求的地址
        async: false,
        type: "get", //请求的方式
        data: "", //携带到后端的参数
        dataType: "json", //期望后端返回的数据类型
        success: function (res) {
          //萤石云token
          //token = res.data.ezviz.access_token;

          //合作开发商
          $("#developer").text(res.data.config.developer);
          //运行设备数
          $("#device").text(res.data.config.device);

          //施工工艺
          var craft = res.data.craft;
          var craft_html = "";

          for (var i = 0; i < craft.length; i++) {
            var craft_number = craft[i].number;
            var craft_process = craft[i].process;
            craft_html +=
              '<li><span style="width: 20%">' +
              craft_number +
              "</span><span>" +
              craft_process +
              "</span></li>";
          }
          $(".craft").html(craft_html);

          //验收流程
          var accept = res.data.accept;
          var accept_title = [];
          var accept_progress = [];
          for (var i = 0; i < accept.length; i++) {
            accept_title.push(accept[i].title);
            accept_progress.push(accept[i].progress);
          }
          //验收程
          acceptEcharts(accept_title, accept_progress);

          //手机端验收流程
          acceptMobileEcharts(accept_title, accept_progress);

          //团队成员
          var team = res.data.team;

          //团队第一条
          if (team.length > 0) {
            $("#team_first").html(
              '<ul style="height: 2rem">' +
                '<img src="' +
                team[0].image +
                '" height="140px"/>' +
                "</ul>" +
                '<ul style="height: 0.5rem; padding-top: 0.1rem">' +
                "<li>" +
                '<span class="tdsize" style="font-size: 15px">姓名:' +
                team[0].name +
                " </span>" +
                '<span class="tdsize" style="font-size: 15px">岗位:' +
                team[0].post +
                " </span>" +
                '<span class="tdsize" style="font-size: 15px">工龄:' +
                team[0].work_year +
                " </span>" +
                '<span class="tdsize" style="font-size: 15px">功效:' +
                team[0].achievements +
                " </span>" +
                "</li>" +
                "</ul>"
            );
          }

          //团队其他成员
          for (var i = 1; i < team.length; i++) {
            $("#team").append(
              "<li>" +
                '<span class="pulll_left">' +
                '<img src="' +
                team[i].avatar +
                '" style="max-height: 100%; max-width: 100%"/>' +
                team[i].name +
                "</span>" +
                "<span>" +
                team[i].post +
                "</span>" +
                "<span>" +
                team[i].work_year +
                "</span>" +
                '<span class="pulll_right">' +
                team[i].achievements +
                "</span>" +
                "</li>"
            );
          }

          //ai 监理
          var supervisor = res.data.supervisor;
          var supervisor_html = "";
          for (var i = 0; i < supervisor.length; i++) {
            supervisor_html +=
              "<li><span>" +
              supervisor[i].address +
              "</span><span>监理" +
              supervisor[i].number +
              "次</span></li>";
          }
          $("#supervisor").html(supervisor_html);

          //摄像头初始化
          const cameras = res.data.camera || [];
          initializePlayers(cameras);

          // 监听窗口大小变化,重新初始化播放器
          window.addEventListener("resize", function () {
            var newTemplate = "pcLive";

            if (newTemplate !== template) {
              template = newTemplate;
              // 重新初始化所有播放器
              if (cameras[0]) {
                mainPlayer = new EZUIKit.EZUIKitPlayer({
                  id: "playWind",
                  width: width,
                  height: (width * 9) / 16,
                  template: template,
                  url: `ezopen://open.ys7.com/${cameras[0].serial_number}/1.hd.live`,
                  accessToken: cameras[0].access_token,
                });
              }

              for (let i = 1; i <= 3; i++) {
                if (cameras[i]) {
                  smallPlayers[i - 1] = new EZUIKit.EZUIKitPlayer({
                    id: `playWind${i + 1}`,
                    width: width / 3,
                    height: ((width / 3) * 9) / 16,
                    template: template,
                    url: `ezopen://open.ys7.com/${cameras[i].serial_number}/1.hd.live`,
                    accessToken: cameras[i].access_token,
                  });
                }
              }
            }
          });

          // 在摄像头初始化完成后,添加以下代码来隐藏移动端控件
          if (screenWidth <= 870) {
            // 添加样式到head
            var style = document.createElement("style");
            style.type = "text/css";
            style.innerHTML = `
              .mobile-ez-ptz-container {
                display: none !important;
              }
              .mobile-ez-toolbar {
                display: none !important;
              }
              .mobile-ez-control {
                display: none !important;
              }
              .mobile-ez-plugin-container {
                display: none !important;
              }
            `;
            document.getElementsByTagName("head")[0].appendChild(style);
          }
        },
      });

      var domain = "https://open.ys7.com";
      var EZOPENDemo;
      window.EZOPENDemo = EZOPENDemo;
      // var width =  document.querySelector("#playWind").clientWidth;
    </script>

    <!--大屏-->
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.countup.min.js"></script>
    <script src="js/jquery.liMarquee.js"></script>
    <script type="text/javascript">
      $(".counter").countUp();
      $(function () {
        $(".scrollDiv1").liMarquee({
          direction: "up",


          runshort: false,
          scrollamount: 10,
        });
      });
    </script>
    <script>
      // 在调用图表之前定义这些变量
      var accept_title = ["包立管", "装修吊顶", "水电施工", "灯线工艺"];
      var accept_progress = [40, 50, 40, 40];
    </script>
  </body>
</html>
